<template>
  <div class="video">
    <div class="video_top">
      <image class="video_top_img" resize="cover" :src="img"></image>
    </div>
    <div class="video_tab" v-if="reverse===0">
      <div class="video_tab_div" :class="[tabReceive === index?'video_tab_divshow':'video_tab_divnoshow']" @click="appearReceive">
        <text class="video_tab_text video_tab_receive" :class="[tabReceive === index ? 'video_tab_show' : 'video_tab_noshow']">{{tab1}}</text>        
      </div>
      <div class="video_tab_div" :class="[tabGive === index ? 'video_tab_divshow' : 'video_tab_divnoshow']" @click="appearGift">
        <text class="video_tab_text video_tab_give" :class="[tabGive === index ? 'video_tab_show' : 'video_tab_noshow']">{{tab2}}</text>        
      </div>
    </div>
    <div class="scroller" v-if="reverse===0" scroll-direction="horizontal" offset-accuracy="750" show-scrollbar="false">
      <list class="video_main" v-if="tabReceive === index">
        <cell class="video_main_cell" v-for="(get,i) in receive" :key="i">
          <div class="video_main_top">
            <image class="video_main_top_img" resize="cover" :src="get.rimg" ></image>
            <text class="video_main_top_uname">{{get.rname}}</text>
            <text class="video_main_top_time">{{get.rtime}}</text>
          </div>
          <div class="video_main_buttom">
            <image class="video_main_buttom_img" resize="cover" :src="get.rgiftimg"></image>
            <div class="video_main_buttom_div">
              <div class="video_main_buttom_div_text">
                <text class="video_main_buttom_text">赠送老师</text>
                <text class="video_main_buttom_text video_main_buttom_textGife">{{get.rgiftname}}</text>
                <text class="video_main_buttom_text video_main_buttom_textUnit">{{get.rgiftunit}}</text>
              </div>
              <text class="video_main_buttom_text">祝老师2018健康快乐!</text>
            </div>
          </div>
        </cell>
      </list>   
      <list class="video_gift" v-if="tabGive === index">
        <cell class="video_gift_cell">
          <div class="video_gift_top">
            <text class="video_gift_title">祝老师2018健康快乐！</text>
          </div>
        </cell>
        <cell class="video_gift_cell" v-for="(give , i) in giveGift" :key="i">
          <div class="video_gift_main" v-for="(g , j) in give" :key="j">
            <div class="video_gift_cnt video_gift_cntLeft" v-if="j==0">
              <image class="video_gift_img" resize="cover" :src="g.gimg" ></image>
              <div class="video_gift_intro">
                <text class="video_gift_intro_name">{{g.gname}}</text>
                <text class="video_gift_intro_price">{{g.gmoney}}</text>
              </div>
            </div>
            <div class="video_gift_cnt" v-if="j==1">
              <image class="video_gift_img" resize="cover" :src="g.gimg" ></image>
              <div class="video_gift_intro">
                <text class="video_gift_intro_name">{{g.gname}}</text>
                <text class="video_gift_intro_price">{{g.gmoney}}</text>
              </div>
            </div>          
          </div>
        </cell>
      </list>   
    </div>
  </div>
</template>

<style scoped>
  .video{}
  .video_top{box-shadow: 0px 14px 0px rgba(0, 0, 0, 0.2);}
  .video_top_img{width: 750px;height: 426px;}

  /*tab部分*/
  .video_tab{flex-direction: row;align-items: flex-end;justify-content: space-between;width: 750px;height: 89px;margin-top:14px;box-shadow: 0px 14px 0px rgba(0, 0, 0, 0.2);background-color: #fff;}
  .video_tab_div{padding-bottom: 15px;}
  .video_tab_divshow{border-bottom-width: 4px;border-bottom-style: solid;border-bottom-color: #E40011;}
  .video_tab_divnoshow{border-bottom-width: 4px;border-bottom-style: solid;border-bottom-color: transparent;}
  .video_tab_show{color: #E40011;}
  .video_tab_noshow{color:#727171;}
  .video_tab_text{width: 375px;text-align: center;font-size: 36px;border-bottom-width: 0px;border-bottom-style: solid;border-bottom-color: transparent;}
  .video_tab_text:active{color: red;}
  .video_tab_receive{border-right-width: 1px;border-right-style: solid;border-right-color: #000;}

  /*slider 部分*/
  .scroller{height: 600px;margin-top: 14px;position: relative;flex-direction: row;}
  
  /*收礼部分*/
  .video_main{width: 750px;height: 600px;}
  .video_main_cell{align-items: center;justify-content: center;height: 258px;border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: #9E9E9E;}
  .video_main_top{flex-direction: row;align-items: center;justify-content: space-between;width: 675px;}
  .video_main_top_img{width: 84px;height: 84px;border-radius: 42px;}
  .video_main_top_uname{width: 360px;overflow: hidden;}
  .video_main_top_time{width: 210px;text-align: right;}
  .video_main_buttom{flex-direction: row;align-items: center;justify-content: space-between;width: 675px;height: 120px;}
  .video_main_buttom_img{width: 270px;height: 120px;margin-left: 40px;}
  .video_main_buttom_div{}
  .video_main_buttom_div_text{flex-direction: row;align-items: flex-end;justify-content: flex-start;}
  .video_main_buttom_text{}
  .video_main_buttom_textGife{color:#E60012;}
  .video_main_buttom_textUnit{color:#E60012;font-size: 45px;margin-left: 10px;}

  /*送礼部分*/
  .video_gift{width: 750px;height: 600px;}
  .video_gift_cell{flex-direction: row;align-items: center;justify-content: center;border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: #9E9E9E;}
  .video_gift_main{}
  .video_gift_top{align-items: center;justify-content: center;height: 100px;}
  .video_gift_title{text-align: center;font-size: 40px;color: #231815;}
  .video_gift_cnt{align-items: center;justify-content: center;width: 375px;height:263px;}
  .video_gift_cntLeft{border-right-style: solid;border-right-width: 1px;border-right-color: #9E9E9E;}
  .video_gift_img{width: 258px;height: 123px;margin-bottom: 20px;}
  .video_gift_intro{flex-direction: row;align-items: center;justify-content: center;}
  .video_gift_intro_name{margin-right: 20px;font-size: 40px;}
  .video_gift_intro_price{color: #E60012;font-size: 40px;}

</style>

<script>
const modal = weex.requireModule('modal')
module.exports = {
  data () {
    return {
      img:'../src/assets/img/banner.jpg',
      tab1:'老师收到的礼物',
      tab2:'给老师送礼',
      index:0,
      tabReceive:0,
      tabGive:1,
      reverse:0,
      rows:[
        {tab:"老师收到的礼物"},
        {tab:"给老师送礼"}
      ],
      isShow:{show: false},
      receive:[
        {rimg:"../src/assets/img/1.jpg",rname:'test01',rtime:'03-05 17:00',rgiftimg:"../src/assets/img/car1.png",rgiftname:'宝马',rgiftunit:'1辆'},
        {rimg:"../src/assets/img/1.jpg",rname:'test02',rtime:'03-05 17:00',rgiftimg:"../src/assets/img/car2.png",rgiftname:'保时捷',rgiftunit:'1辆'},
        {rimg:"../src/assets/img/1.jpg",rname:'test03',rtime:'03-05 17:00',rgiftimg:"../src/assets/img/car3.png",rgiftname:'法拉利',rgiftunit:'1辆'},
        {rimg:"../src/assets/img/1.jpg",rname:'test04',rtime:'03-05 17:00',rgiftimg:"../src/assets/img/car4.png",rgiftname:'布加迪',rgiftunit:'1辆'},
        {rimg:"../src/assets/img/1.jpg",rname:'test01',rtime:'03-05 17:00',rgiftimg:"../src/assets/img/car1.png",rgiftname:'宝马',rgiftunit:'1辆'},
        {rimg:"../src/assets/img/1.jpg",rname:'test02',rtime:'03-05 17:00',rgiftimg:"../src/assets/img/car2.png",rgiftname:'保时捷',rgiftunit:'1辆'},
        {rimg:"../src/assets/img/1.jpg",rname:'test03',rtime:'03-05 17:00',rgiftimg:"../src/assets/img/car3.png",rgiftname:'法拉利',rgiftunit:'1辆'},
        {rimg:"../src/assets/img/1.jpg",rname:'test04',rtime:'03-05 17:00',rgiftimg:"../src/assets/img/car4.png",rgiftname:'布加迪',rgiftunit:'1辆'},
        
      ],
      giveGift:[
        [{gimg:"../src/assets/img/car1.png",gname:"宝马",gmoney:"¥9.99"},{gimg:"../src/assets/img/car2.png",gname:"保时捷",gmoney:"¥99.99"}],
        [{gimg:"../src/assets/img/car3.png",gname:"法拉利",gmoney:"¥999.99"},{gimg:"../src/assets/img/car4.png",gname:"布加迪",gmoney:"¥9999.99"}],
      ]
    }
  },
  methods: {
    somemethod: function() {
      this.$getConfig().env.deviceWidth;
    },
    selectSort (item) {
      item.show = !item.show;
    },
    appearReceive:function (e) {
      this.index=0;
    },
    appearGift:function (e) {
      this.index=1;
    },
  }
}
</script>